<template>
        <div id="role" class="container-fluid padding">
            <div id="edit" class="container-fluid padding">
                <div style="text-align: center;">
                    <el-transfer
                            style="text-align: left; display: inline-block;"
                            v-model="assigned"
                            filterable
                            :render-content="renderFunc"
                            :titles="['无访问权限', '有访问权限']"
                            :button-texts="['到左边', '到右边']"
                            :props="{
                              key: 'value',
                              label: 'value'
                            }"
                            @change="handleChange"
                            :data="assignedavailable">
                    </el-transfer>
                </div>
            </div>
        </div>
</template>

<script>
    export default {
        name: "route",
        created:function(){
            this.$nextTick(function () {
                $(".el-transfer").css("width","100%");
                $(".el-transfer-panel").css("width","40%");
                $(".el-transfer-panel__list").css("height","500px");
                $(".el-transfer-panel__body").css("height","600px");
                this.$message_.postTips(this,'','qx-route/list',{},(response)=>{
                    if (response.data.res == 1) {//成功
                        var assignedavailable = []
                        var assigned = []
                        var assigned_ = response.data.data.assigned
                        var available_ = response.data.data.available
                        for(let i in assigned_) {
                            assignedavailable.push({value:assigned_[i]});
                            assigned.push(assigned_[i]);
                        }
                        for(let i in available_) {
                            assignedavailable.push({value:available_[i]})
                        }
                        this.assignedavailable = assignedavailable
                        this.assigned = assigned
                        this.$forceUpdate()
                    }
                },()=>{obj.del();})
            });
        },
        data() {
            return {
                renderFunc(h, option) {
                    return  <span > {option['value']} < /span>;
                },
                selectedAvailable: [],
                available:[],
                selectedAssigned: [],
                assigned:[],
                assignedavailable:[],
            }
        },
        methods: {
            handleChange:function(value, direction, movedKeys) {//改变assigned
                switch (direction){
                    case "right"://分配
                        this.$message_.postTips(this,'分配','qx-route/assign',{routes: movedKeys});
                        break;
                    case "left"://反分配
                        this.$message_.postTips(this,'分配','qx-route/remove',{routes: movedKeys});
                        break;
                }
            },
        }
    }
</script>